<template>
	<view>
		<view class="top dis_fx fx_column fx_between">
			<view class="info dis_fx fx_column">
				<view class="img_box fz_0"><image src="../../static/test.png" mode="aspectFill"></image></view>
				<text  v-if="shareUserNikeName!=''">{{shareUserNikeName || "小河流水"}} 邀请你成为乐芭兔会员</text>
				<text  v-if="shareUserNikeName==''">加入会员好处多多</text>
			</view>
			<image src="../../static/logo2.png" class="logo"></image>
		</view>
		
		<view class="mid dis_fx fx_column fx_between">
			<view class="info dis_fx fx_column">
				<view v-html="introduce"></view>
			</view
		</view>
		
		<view class="bottom">
			<view class="text_box dis_fx fx_column fx_center">
				<image src="../../static/success_icon.png"></image><text @click="xieyiShow('show',0)">已同意《{{agreement[0].title  }} 》及</text><text @click="xieyiShow('show',1)">《{{agreement[1].title}}》</text></text>
			</view>
			<view class="price dis_fx fx_column fx_center" v-if="!userInfo.vipLevel || userInfo.vipLevel<1" @click="prepay()">加入乐芭兔会员（支付￥{{vipAmount || "0.00"}}）</view>
		</view>
		<!-- 协议弹框 -->
		<view class="xieyi_box" v-if="xieyiState">
			<view class="xieyi">
				<view class="close_btn" @click="xieyiShow('hide',2)"></view>
				<view v-html="content"></view>
			</view>
		</view>
	</view>
</template>

<script>
	var jweixin = require('jweixin-module')
	import util from '../../common/util.js'
	export default {
		data() {
			return {
				agreement:[],  //协议，竟然是数组……
				introduce:"",  //介绍会员的好处
				vipAmount:0,   //会员价格
				shareUserNikeName:"",  //分享人昵称
				userInfo:{},  //会员信息
				xieyiState:false ,  // 协议弹窗
				content:"",   //协议内容
			}
		},
		
		onLoad(option){
					
			if(option.reffent){
				var reffent = option.reffent;
				uni.setStorageSync('reffent', reffent); //保存分享人id 为后面授权登录时绑定推荐人
			}
			this.getShareInfo(reffent);		
		},
		
		onShow() {
			this.userInfo=JSON.parse(uni.getStorageSync('UserInfo'))
		},
		
		
		methods: {
			//获取分享信息
			getShareInfo(shareUserId) {
				uni.showLoading({
					mask:true,
					title: '加载中'
				});
				var that = this;
				var url ='/user/beInviteInit.do';
				if(shareUserId!=null){
					url ='/user/beInviteInit.do?shareUserId='+shareUserId;
				}
				
				util.fetchPost(url,{},function(res){
					var data=res.data;
					
					console.log(data.introduce)
					that.agreement=data.agreement;
					that.introduce=data.introduce;
					
					that.vipAmount=data.vipAmount;
					that.shareUserNikeName=data.shareUserNikeName
					
					uni.hideLoading();
				},function(){},true)
			},
			prepay(){
				var that=this
				var params={token:that.userInfo.token}
				util.fetchGet('/user/wxVipJsApiPay',params,function(res){
					
					if(!res.success){
						uni.showModal({
							content: res.msg,
							showCancel: false
						});	
						return ;
					}
					
					if(res.data){
						if (typeof WeixinJSBridge == "undefined"){
						   if( document.addEventListener ){
							   document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
						   }else if (document.attachEvent){
							   document.attachEvent('WeixinJSBridgeReady', onBridgeReady); 
							   document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
						   }
						}else{
							that.onBridgeReady(res);
							
						
						  
						}
					}
				},function(){},true)
			},
			onBridgeReady(res){
				WeixinJSBridge.invoke('getBrandWCPayRequest', {
					"appId" : res.data.appId, //公众号名称,由商户传入     
					"timeStamp" : res.data.timeStamp, //时间戳,自1970年以来的秒数     
					"nonceStr" : res.data.nonceStr, //随机串     
					"package" : res.data.package,
					"signType" : res.data.signType, //微信签名方式：     
					"paySign" : res.data.paySign
				//微信签名 
				}, function(res) {
					if (res.err_msg == "get_brand_wcpay_request:ok") {
						/* uni.showModal({
							content: '支付成功',
							showCancel: false
						});	 */
						window.location.href='http://m.lobatu.com';
						//支付成功后跳转的页面
					} else if (res.err_msg == "get_brand_wcpay_request:cancel") {
						console.log('支付取消');
					
					} else if (res.err_msg == "get_brand_wcpay_request:fail") {
						console.log('支付失败');
						WeixinJSBridge.call('closeWindow');
					} //使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok,但并不保证它绝对可靠。
				});
			},
			// 协议弹框
			xieyiShow(state,index){
				if(state == 'show'){
					this.xieyiState = true
					this.content=this.agreement[index].content
				}else{
					this.xieyiState = false
					this.content=""
				}
			}
		}
	}
</script>

<style>
.top{
	position: fixed;
	top: 44px;
	left: 0;
	width: 100%;
	background: #282828;
	height: 100upx;
	padding: 0 30upx;
}
.top .info .img_box{
	width: 60upx;
	height: 60upx;
	border-radius: 50%;
	overflow: hidden;
}
.top .info text{
	font-size: 24upx;
	color: #ffffff;
	margin-left: 10upx;
}
.top .logo{
	width: 150upx;
	height: 36upx;
}

.mid {
	margin-top: 100upx;
	
}
.bottom{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
}
.bottom .text_box{
	background: #EDEDED;
	height: 72upx;
}
.bottom .text_box image{
	width: 32upx;
	height: 32upx;
}
.bottom .text_box text{
	font-size: 20upx;
	color: #9a9a9a;
	margin-left: 15upx;
}
.bottom .price{
	font-size: 31upx;
	color: #000000;
	height: 100upx;
	background: #FFC801;
}
.xieyi_box{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9;
}
.xieyi_box .xieyi{
	width: 80%;
	height: 80%;
	background: #fff;
	border-radius: 10upx;
	overflow-y: scroll;
	padding: 30upx;
	position: relative;
}
.xieyi_box .close_btn{
	background: url(../../static/clear_icon.png) no-repeat center/cover;
	width: 30upx;
	height: 30upx;
	position: absolute;
	right: 10upx;
	top: 10upx;
}
</style>
